<template>
    <div
        class="cashInstRepeal"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="特色业务-->现金分期撤销">
            <template slot="cardBody">
                <div class="headerBox">
                    <!-- 表单模块 -->
                    <el-form
                        class="submitForm"
                        ref="submitForm"
                        :model="formData"
                        label-position="right"
                        :rules="formRules"
                        size="small"
                        label-width="40%"
                    >
                        <el-form-item label="卡号:" label-position="left" prop="CARDNBR">
                            <el-select placeholder="请选择卡号" clearable v-model="formData.CARDNBR">
                                <el-option
                                    v-for="(item, index) in cardList_3601"
                                    :key="index"
                                    :label="item.CARDNBR"
                                    :value="item.CARDNBR"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="撤销申请书编号:" label-position="left" prop="BLTRFREF">
                            <el-input placeholder="请输入撤销申请书编号" v-model="formData.BLTRFREF"></el-input>
                        </el-form-item>
                        <el-form-item label="免除撤销手续费:" label-position="left" prop="CNLFEEYN">
                            <el-select
                                placeholder="请选择免除撤销手续费"
                                clearable
                                v-model="formData.CNLFEEYN"
                            >
                                <el-option
                                    v-for="(item, index) in CNLFEEYNLIST"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-row class="buttonBox">
                            <el-button type="primary" size="small" @click="handleSubmit">撤 销</el-button>
                            <el-button
                                type="primary"
                                plain
                                size="small"
                                @click="handleTurnPage"
                            >分期付款申请记录查询</el-button>
                        </el-row>
                    </el-form>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { RegConfig } from '@/utils/RegConfig';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'cashInstRepeal',
    components: {
        cardComponent,
    },
    data() {
        return {
            pageLoading: false, // 页面loading
            // 免除撤销手续费 下拉选择列表
            CNLFEEYNLIST: [],
            // 表单数据
            formData: {
                CARDNBR: '', // 卡号
                BLTRFREF: '', // 撤销申请书编号
                CNLFEEYN: '', // 免除撤销手续费
            },
            // 表单验证规则
            formRules: {
                CARDNBR: [
                    { required: true, message: '请选择卡号', trigger: 'blur' },
                ],
                BLTRFREF: [
                    { required: true, message: '请输入撤销申请书编号', trigger: 'blur' },
                    { pattern: RegConfig.certificateNo, message: '证书编号应由数字和字母组成，请重新输入', trigger: 'blur' },
                ],
                CNLFEEYN: [
                    { required: true, message: '请选择免除撤销手续费', trigger: 'blur' },
                ],
            },
        };
    },

    created() {
        // 获取信用计划编号 下拉选择列表
        this.getBaseData({ dictValue: 'REVOKED_MONEY' }, 'CNLFEEYNLIST');
    },

    computed: mapState({
        cardList_3601: state => state.common.cardList_3601, // 卡列表信息
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
    }),

    mounted() {
        // 默认卡号
        this.formData.CARDNBR = this.cardInfo_3004.CARDNO;
    },
    methods: {
        // 获取基础数据列表
        getBaseData(params, target) {
            this.$post.common.getBaseDataList(params).then((res) => {
                // console.log(res, 'res-数据字典查询结果')
                this[target] = res.data.content;
            });
        },

        // 点击提交数据
        handleSubmit() {
            this.$refs.submitForm.validate((valid) => {
                if (valid) {
                    this.$confirm('您确认撤销吗?', '温馨提示', { customClass: 'warning', type: 'warning' }).then(() => {
                        this.pageLoading = true;
                        // 设置请求参数 -- 4075 交易
                        const appBody = {
                            PINFLAG: this.pinFlag, // 是否检查密码标志 0-不检查
                            OPERTP: '2', // 0－现金贷款/余额转移申请资料修改，1－现金贷款/余额转移申请，2－现金贷款/余额转移当日撤销，3—现金贷款/余额转移试算
                            CARDNBR: this.formData.CARDNBR, // 卡号
                            BLTRFREF: this.formData.BLTRFREF, // 撤销申请书编号
                            CNLFEEYN: this.formData.CNLFEEYN, // 免除撤销手续费
                            MPDRTYN: '1', // 强制通过 0:非强制通过 1:强制通过
                            BTYPE: '1', // 业务类型 0:对私 1:对公
                        };
                        const params = JSON.parse(JSON.stringify(this.defaultParams));
                        // console.log(this.defaultParams, 'this.defaultParams')
                        params.body.appHead.tranCode = '4075';
                        params.body.appBody = appBody;

                        // 跑 4075 交易
                        this.$post.common.transPort(params).then((res) => {
                            this.pageLoading = false;
                            if (res.status === 200) {
                                const result = JSON.parse(res.data.jsonRes);
                                console.log(result, 'result -- 4075');
                                if (result.sysHead.rspCd === '000000') {
                                    this.$alert('现金分期撤销成功', '提示', {
                                        customClass: 'success', type: 'success',
                                    });
                                } else {
                                    const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                                    this.$alert(errorMsg, result.sysHead.rspDesc, {
                                        customClass: 'error', type: 'error',
                                    });
                                }
                            } else {
                                this.$message.error('请求失败');
                            }
                        });
                    });
                } else {

                }
            });
        },

        // 点击 跳转 -> 分期付款申请记录查询 页面
        handleTurnPage() {
            this.$router.push({
                path: '/cashInstalment/cashInstApplyList',
            });
        },
    },
};
</script>
<style lang="scss">
.cashInstRepeal {
    .submitForm {
        .el-input,
        .el-select {
            width: 100%;
            max-width: 400px;
        }
    }
}
</style>
<style scoped rel="stylesheet/scss" lang="scss">
.cashInstRepeal {
    .buttonBox {
        text-align: center;
        margin-top: 50px;
    }
}
</style>
